﻿/**
* Vista asociada a la grafica de datos
* selecionado una region determinada
* en el aplicativo.
*/
Ext.define("entgpv11.view.ContentMenu02.RegionesCharts", {
    extend: "Ext.Container",
    alias: "widget.regionescharts",
	requires: [
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.chart.series.Pie'],
	config: {
	 	dataArguments:null,
		layout: {
            type: 'fit'
        }
    },
    initialize: function () 
    {
	        try
            {
			        this.callParent(arguments);
			        var dataObject = this.getDataArguments();
			        /*
				        data: Object
				        contraparte: 80000
				        id: "289"
				        inversion: 180000
				        numero: 2
				        plan: 100000
				        region: "Regional 2"
			        */
			        var backButton = {
				        xtype: "button",
				        ui: "back",
				        iconCls: "reply", iconMask: true,
				        handler: this.onBackButtonTap,
				        scope: this
			        };
				    this.exitButton = {
				        xtype: "button",
				        ui: 'decline',
				        iconCls: "delete",iconMask: true,
				        handler: this.onExitButtonTap,
				        scope: this
				    };
			        var topToolbar = {
				        xtype: "toolbar",
				        title: dataObject.get("region"),
				        docked: "top",
				        items: [
					        backButton,
					        { xtype: 'spacer' },
                            this.exitButton
				        ]
			        };
			        var p  = Number(dataObject.get("plan"));
 			        var c  = Number(dataObject.get("contraparte"));
 			        var i  = Number(dataObject.get("inversion"));
 			        var pc = 0;
 			        var cc = 0;
			        i = i.toFixed(2);
			        if (p != 0 && i!=0)
 			        {
 						        pc =(p*100)/i;
 			        }
 			        if (c != 0 && i!=0)
 			        {
 						        cc =(c*100)/i;
 			        }		
			        pc = Number(pc);
                    cc = Number(cc);		
			        var store = new Ext.data.JsonStore({
				        fields: ['name','name1', 'data1'],
				        data: [
					        {'name':'Contraparte','name1':'Contraparte '+cc.toFixed(2)+' %', 'data1': cc.toFixed(2)},
					        //{'name':'Inversion','name1':'Inversion '+i+' %', 'data1':i},
					        {'name':'Plan', 'name1':'Plan '+pc.toFixed(2)+' %','data1':pc.toFixed(2)}
				        ]
			        });

			        var barChart=new Ext.chart.Chart({
						        renderTo: Ext.getBody(),
						        insetPadding: 50,
						        width: 400,
						        height: 300,
						        animate: {
							        easing: 'bounceOut',
							        duration: 750
						        },
						        store: store,
						        gradients: [
								        {
									        'id': 'v-1',
									        'angle': 0,
									        stops: {
										        0: {
											        color: 'rgb(212, 40, 40)'
										        },
										        100: {
											        color: 'rgb(117, 14, 14)'
										        }
									        }
								        },
								        {
									        'id': 'v-2',
									        'angle': 0,
									        stops: {
										        0: {
											        color: 'rgb(180, 216, 42)'
										        },
										        100: {
											        color: 'rgb(94, 114, 13)'
										        }
									        }
								        }  
						        ],
						        axes: [{
								        type: 'Numeric',
								        position: 'left',
								        fields: ['data1'],
								        label: {
									        renderer: Ext.util.Format.numberRenderer('0,0')
								        },
								        title: 'Valores',
								        grid: true,
								        minimum: 0
							        }, {
								        type: 'Category',
								        position: 'bottom',
								        fields: ['name'],
								        title: 'Datos'
						        }],
						        series: [{
								        type: 'column',
								        axis: 'left',
								        highlight: true,
								        renderer: function(sprite,storeItem, barAttr, i, store) {
								            barAttr.fill = "url(#v-" + (i % colors.length + 1) + ")";
									        return barAttr;
								        },
								        tips: {
								          trackMouse: true,
								          width: 140,
								          height: 28,
								          renderer: function(storeItem, item) {
									        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
								          }
								        },
								        label: {
								          display: 'insideEnd',
								          'text-anchor': 'middle',
									        field: 'data1',
									        renderer: Ext.util.Format.numberRenderer('0'),
									        orientation: 'vertical',
									        color: '#333'
								        },
								        xField: 'name',
								        yField: 'data1'
							        }],
							        interactions: [
								        {
									        type: 'panzoom',
									        axes: ['bottom']
								        }
							        ]
						        });
													
					        var pieChart = new Ext.chart.Chart({
					         store: store,
					         shadow: false,
					         animate: true,
					         insetPadding: 20,
					         width: 400,
					         height: 300,
					         legend: {
						        position: 'left'
					         },
					         interactions: [
						        {
							        type: 'reset',
							        confirm: true
						        },
						        {
							        type: 'rotate'
						        },
						        'itemhighlight',
						        {
							        type: 'iteminfo',
							        gesture: 'longpress',
							        listeners: {
								        show: function (interaction, item, panel) {
									        var storeItem = item.storeItem;
									        panel.setHtml(['<ul><li><b>Valor: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('data1') + '</li></ul>'].join(''));
								        }
							        }
						        }
					        ],
					        series: [
						        {
							        type: 'pie',
							        field: 'data1',
							        donut: 25,
							        showInLegend: true,
							        highlight: false,
							        //when labels overflow the pie slice, set to use a callout.
							          listeners: {
								        'labelOverflow': function(label, item) {
								          item.useCallout = true;
								        }
							          },
							        // Example to return as soon as styling arrives for callouts
							        callouts: {
								        renderer: function (callout, storeItem) {
									        callout.label.setAttributes({
										        text: storeItem.get('name')
									        }, true);
								        },
								        filter: function () {
									        return false;
								        },
								        box: {
									        //no config here.
								        },
								        lines: {
									        'stroke-width': 2,
									        offsetFromViz: 20
								        },
								        label: {
									        font: 'italic 14px Arial'
								        },
								        styles: {
									        font: '14px Arial'
								        }
							        },
							        label: {
								        field: 'name1'
							        }
					        }
				          ]
				        });
				
			        /*	
			        var bottomToolbar = {
				        xtype: "toolbar",
				        docked: "bottom",
				        items: [
					
				        ]
			        };
			        */
			        var tabs01 = 
			        {	 
				         xtype: 'panel',	  
				         title:'Pastel',
				         iconCls: 'arrow_left',
				         items:[pieChart]
			
			        };
			        var tabs02 = {
			             xtype: 'panel',
				         title:'Barras',
				         iconCls: 'arrow_right',
				        items:[barChart]
			        };
					
			        var tabGlobal = Ext.create('Ext.TabPanel', {
                            scrollable: 'vertical',
                            tabBarPosition: 'bottom',
                            styleHtmlContent: true,
                            items: [tabs01, tabs02, {
                                title: 'Datos',
                                iconCls: 'info',
                                html: '<ul><li><b>Inversion: </b>' + dataObject.get('inversion') + '</li><li><b>contraparte: </b> ' + dataObject.get('contraparte') + '</li>'+ '<li><b>Plan: </b> ' + dataObject.get('plan') + '</li></ul>'
                            }] // items
                        }); // create()

                        this.add([topToolbar, tabGlobal]);
            } catch (ex) {
		            APP_GLOBAL.SetLog('RegionesCharts.initialize::' + ex);
            }
	},
	onBackButtonTap: function () {
        //console.log("backButtonTap");
        this.fireEvent("backButtonMenu02Command", this);
    },
    onExitButtonTap: function () {
        this.fireEvent("exitButtonTapCommand", this);
    }
    
 });